<script setup lang="ts"></script>

<template>
    <router-view v-slot="{ Component, route }">
        <transition name="fade" mode="out-in">
            <div class="wrap">
                <keep-alive v-if="route.meta.keepAlive">
                    <component :is="Component" :key="route.path" />
                </keep-alive>
                <component
                    :is="Component"
                    :key="route.path"
                    v-else-if="!route.meta.keepAlive"
                />
            </div>
        </transition>
    </router-view>
</template>

<style>
.wrap {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 10s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}
</style>
